<template>
	<view class="page-main">
		<!-- #ifndef MP-WEIXIN -->
		<view class="device-status_bar"></view>
		<!-- #endif -->
		<view class="search-header-wrapper" style="line-height: 30px;">
			<view class="search">
				<icon type="search" 
				<!-- #ifdef MP-WEIXIN -->
					style="margin-left: 5px;margin-top:26rpx"
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					style="margin-right: 5px;"
					<!-- #endif -->
					size="14" color="#888888"/>
					<input focus type="search" style="width: 100%;-webkit-justify-content: left;"
						v-model="searchKeyword" placeholder="请输入园区名或位置" placeholder-style="color:#888888"
						@confirm="search()" />
			</view>
			<p class="cancel-button" @click="goHome">取消</p>
		</view>
		<view class="flex searchTitle">
			<p>历史搜索</p>
			<p @tap="clear(1)">清除历史记录</p>
		</view>

		<view class="history-search-content-wrapper">
			<view class="searchCard" v-for="(item, i) in searchHistoryArr" @click="search(item)" :key="i">
			{{item}}
			</view>
			<view class="searchCard" v-if="judgeData(searchHistoryArr)">暂无</view>

		</view>

		<view class="flex searchTitle">
			<p>热门搜索
				<image src="../../static/hot.png" style="width: 15px;" class="searchTitleIcon" mode="aspectFit"></image>
			</p>

		</view>
		<view class="hot-search-content-wrapper">
			<view class="searchCard" v-for="(item,i) in hotSearchArr" v-if="item!==''" @click="search(item)" :key="i">
				{{item}}
			</view>
			<view class="searchCard" v-if="judgeData(hotSearchArr)">暂无</view>
		</view>


	</view>
</template>

<script>
	import {
		appMixin
	} from "../../util/reuse"
	import {
		ROUTER_OBJ,
		SEARCH_HISTORY_ARR,
		TESTING,
		uniNavigate,
		d_uniShowToast
	} from "../../util/misc"
	import {
		checkStringBlank,
		removeValOf,
		uniSetStorageSync
	} from "../../util/funcs"
	import {
		optionalTokenRequest
	} from "../../util/network"

	export default {
		mixins: [appMixin],
		data() {
			return {
				searchKeyword: '',
				searchHistoryArr: [],
				hotSearchArr: []
			};
		},
		
		onShow() {
			this.getHistorySearch();
		},
		
		methods: {
			back() {
				uni.navigateBack()
			},
			
			// 获取热门搜索和个人搜索历史
			getHistorySearch() {
				this.searchHistoryArr = uni.getStorageSync(SEARCH_HISTORY_ARR) || [];
				let postData = {
					city: uni.getStorageSync('MY_LOCATION').city
				}
				this.$tokenRequest('/search_history',postData).then((data) => {
					this.hotSearchArr = data.data.hot_search_history || [];
				})
			},
			
			// 是否显示暂无
			judgeData(data) {
				if(data.length <= 0) return true
				return false
			},
			
			//清除历史记录
			clear(i) {
				if (i === 1) {
					this.searchHistoryArr = []
					uni.setStorageSync(SEARCH_HISTORY_ARR, this.searchHistoryArr)
				} else {
					this.hotSearchArr = []
				}
			},
			
			goHome() {
				uni.switchTab({
					url: '../home/home',
					fail: function(res) {

					}
				});
			},

			search(val) {
				if (val) {
					this.searchKeyword = val;
				}
				if (checkStringBlank(this.searchKeyword)) {
					d_uniShowToast({
						title: '输入为空'
					})
					return
				}

				// if(this.searchKeyword === '')
				// 先从历史记录里面找, 找得到就删除, 并重新推入
				removeValOf(this.searchHistoryArr, this.searchKeyword)

				this.searchHistoryArr.unshift(this.searchKeyword)
				uniSetStorageSync(SEARCH_HISTORY_ARR, this.searchHistoryArr)

				uni.setStorageSync(ROUTER_OBJ, {
					displayBuildMode: false,
					searchKeyword: this.searchKeyword
				})
				uniNavigate('/listPage/listPage')
				// 清空输入框
				this.searchKeyword = ''
			}
		},
		
		beforeDestroy() {
			uni.setStorageSync(SEARCH_HISTORY_ARR, this.searchHistoryArr)

		}
	}
</script>

<style lang="scss" scoped>
	@import "../../assets/styles/global";

	.page-main {
		padding: 0 15px;

		.search-header-wrapper {
			padding-top: 10px;

			display: flex;
			@include center;
			justify-content: space-between;

			.search {
				display: flex;
				height: 30px;
				line-height: 30px;
				border-radius: 20px;
				background-color: #f0f2f4;
				width: 81vw;
				padding: 0 15px;
				margin-right: 8px;
				@include center;

				input {
					@include center;
					position: relative;
					font-size: 14px;

				}
			}

			.cancel-button {
				width: 10vw;
				font-size: 4vw;
				/*background-color: yellow;*/
				text-align: center;
				color: #232323;

			}
		}

		.history-search-content-wrapper,
		.hot-search-content-wrapper {
			height: 100%;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			justify-content: flex-start;
			margin-right: -10px;
			min-height: 42px;

			max-height: 132px;
			overflow: scroll;

			.searchCard {
				max-width: 90vw;
				margin: 8px 8px 0 0px;
				background-color: #f0f2f4;
				padding: 0px 10px;
				margin-right: 12px;
				color: #888888;
				font-size: 14px;
				height: 36px;
				@include center;
				line-height: 36px;
				@include ellipsis3(1);
			}
		}

		.hot-search-content-wrapper {
			height: 100%;
		}

	}
</style>

<style lang="scss" scoped>
	.searchTitleIcon {
		position: relative;
		top: 5px;
		width: 25px;
		height: 25px;
		margin: 0 5px;
	}

	.searchTitle {
		margin: 15px 0px;

		p:nth-child(2) {
			flex-grow: 1;
			text-align: right;
			text-decoration: underline;
			color: #888888;
			font-size: 12px;
			line-height: 21px;
		}
	}
</style>
